const obj = myGetUrlValObj();
// console.log(obj.id);

const box = document.querySelector(".box");
let str;
$(function () {
    $.ajax({
        url: "../json/data2.json",
        data: { id: obj.id },
        dataType: "json",
    })


        .done(function (res) {
            render(res.data2);
            // console.log(res.data2)
        })

    function render(data2) {
        // console.log(data2)
        data2.forEach(function(item){
            if(item.id==obj.id){
            // console.log(item.id);
            // console.log(obj.id);
            str=` <h1 class="head">${item.name}</h1>
<div class="headNo">
    <span class="bh">商品编号</span>
    <span class="bhNo">${item.product_no}</span>
</div>
<div class="clear"></div>
<div class="recommand">
   ${item.recommendDesc}
</div>
<div class="product_img">
<div id="preview">
    <div class="jqzoom">
        <img src="${item.picUrl}" alt="" width="387" height="387">
    </div>
</div>
</div>
<div class="product">
<div class="clear"></div>
<div class="choose_wrap" style="position: relative;">
<div>

    <dl class="item mallprice">
        <dt>商城价</dt>
        <dd class="tl w360">
            <span id="integral" style="display: none;">积分</span>
            <!-- <div class="through oldprice" id="oldprice01" style="display: none;"></div> -->
            <span class="small" id="small" style="margin-left: 10px;">现金</span>
            <div class="through oldprice" id="oldprice02">${item.max_price}</div>
        </dd>
        <div class="clear"></div>
    </dl>

   
    <dl class="item">
        <dt style="height: 44px;padding-top: 10px;">操作说明</dt>
        <dd class="tc w360">
            <div class="tips red" id="minmax" style="line-height: 100%;text-align: left;margin-left: 10px;margin-top:10px;">积分调整范围0-10600</div>
            <div style="line-height: 100%;text-align: left;margin-left: 10px;margin-top:10px;margin-bottom:10px;">调整积分范围,现金会随着积分加减而变化</div>
        </dd>
        <div class="clear"></div>
    </dl>
</div>

<div id="attrcontainer"><dl class="item2" style="border-bottom: none;"><dt>颜色</dt><dd class="tc w360"><div class="choose_model" id="choose_model0"><div class="coloritem"><a href="javascript:;" sort="0" title="浅紫色" class="active"> <span fatherby="choose_model0" data_sysno="21098" belong="375326">${item.stock_title}<i></i></span></a></div></div></dd> <div class="clear"></div></dl><div class="line"></div><div class="clear"></div></div>
<div class="">
    <dl class="item2" style="border-top:solid 1px #f2f2f2;border-left: solid 1px #f2f2f2;">
        <dt>数量</dt>
        <dd class="w360 ">
            <p id="productnum">
            </p><p class="price_PID mt10 number countbox" maxinteger="0">
                <input type="hidden" value="2" name="number">

                <input class="input" id="totalcount" value="1">
               
                <span id="number_SY">
                    <span class="add up" id="numplus" name="加">+</span>
                    <span class="add down" id="numsub" name="减">-</span>
                </span>
            </p>
            <p></p>
            <p class="ml10" id="remaining_number"><span>剩余${item.quanity}</span>件</p>
            <!-- <div class="" style="color:#333;float:right;width:47%">最多可奖<span id="returnIntegral" style="color:#ff7f00">133</span>积分<a title="现金消费2元奖1个东方万里行积分" style="width:15px;height:15px;display:inline-block;background-image:url(../../assets/images/tipIcon.png);background-size:15px 15px;margin:0px 0 0 5px;"></a></div> -->
            <br>
            <p class="ml10 red" id="graybtn" style="margin-top: -12px; line-height: 100%;">
               
            </p>
        </dd>
    </dl>
    <div class="btnBlue " id="btncaropear">
        <a href="#" class="blue2 mr10" id="nowBuy">立即购买</a>
        <a href="javascript:;" id="addtocar" name="cart"> 加入购物车</a>
        </div>
</div>
</div>
</div>`   


$('.box').html(str);
    // 点击+
    $('.box').click(function(e){
        if(e.target.getAttribute("name")==="加"){
            $('.input').val($('.input').val()-0+1>item.quanity?item.quanity:$('.input').val()-0+1);
    // 点击- 
        }else if(e.target.getAttribute("name")==="减"){
            $('input').val($('.input').val()-1<1?1:$('.input').val()-1);
    
    // 点击加入购物车
        }else if(e.target.getAttribute("name")==="cart"){
            // 判断是否为登录状态
            // 获取cookie数据对象
            const cookie=myGetCookie();
            // 没有登陆的情况
            if(cookie.login!=='1'){
               if(window.confirm("您还没有登录，请点击确定去登录")===true){
                    window.location.href=`./login.html?url=${window.location.href}`;
               } 
               
                return;
            }
            // 已经登录的情况
            // 存储本地数据，键名为cart,此时localStorage.cart为空
            // (1)获取购物车信息
            let cart=localStorage.cart;
            // 结果是undefined
            // console.log(cart)
            // 当没有购物车信息时
            if(cart===undefined){
                // 判断输入框中的数量是否在库存范围内
                if(!($('.input').val()-0>=1&&$('.input').val()-0<=item.quanity)){
                    window.alert("库存不足");
                    return;
                }
                // 购买数量
                item.num=$('.input').val()-0;
                // 购买状态
                item.buy=true;
                // 存储为json字符串或字符串
                // 第一种添加方式
                localStorage.setItem( 'cart' , JSON.stringify( [item] )  );
                //  第二种添加方式
                // localStorage.cart=JSON.stringify([item]);
                // 购物车信息已经存在  
            }else{
                // 购物车信息已经存在但是是空数组
                // 先还原json字符串
                cart=JSON.parse(cart);
                if(cart.length===0){
                    if(!($('.input').val()-0>=1&&$('.input').val()-0<=item.quanity)){
                    window.alert("库存不足");
                    return;
                }
                item.num=$('.input').val()-0;
                item.buy=true;
                localStorage.cart=JSON.stringify([item]);
                // 购物车不是空车
              }else{
                //  判断购物车中有没有当前要添加的商品
                // 如果有就直接增加数量
                // 如果没有就添加属性
                // 循环数组判断购物车物品id是否有与当前物品id相同的，如果有证明物品在购物车之中存在
                let bool=cart.some(function(val){
                    
                    return val.id===item.id;
                    
                })
                if(bool){
                    for(let i=0;i<=cart.length-1;i++){
                        if(cart[i].id===item.id){
                            let addNum=(cart[i].num-0) + ( $('.input').val()-0);
                            // 判断新添加之后的数量是否小于库存、
                            if(!(addNum>=1&&addNum<=cart[i].quanity)){
                                window.alert("您输入的范围有误");
                                return;
                            }
                            cart[i].num=addNum;
                            localStorage.cart=JSON.stringify(cart);
                        }
                    }
                    // 购物车里边没有当前要加入购物车的物品
                }else{
                    if(!($('.input').val()-0>=1&&$('.input').val()-0<=item.quanity)){
                    window.alert("库存不足");
                    return;
                }
                item.num=$('.input').val()-0;
                item.buy=true;
                cart.unshift(item);
                localStorage.cart=JSON.stringify(cart);
                }
              }
            }
    window.location.href="./cart.html";
        

        }
    })
 }
      
})
  
}
})